<template>
  <view class="search">
    <view class="search-input">
      <!-- <view
        class="font-14 font-weight-500 search-input-city"
        @click="selectCity"
      >
        <image
          :src="require('@/static/public/spot.png')"
          class="spot"
        />
        {{ form.city }}
      </view> -->
      <view
        class="search-input-txt"
        @click="openSearch"
      >
        <input
          v-model="form.inputValue"
          placeholder-class="ph-sty"
          class="font-14"
          type="search"
          :disabled="disabled"
          :placeholder="placeholder"
          confirm-type="搜索"
          @confirm="searchBtn"
        >
        <image
          v-if="!form.inputValue"
          :src="require('@/static/public/otherSearch.png')"
          class="other-search"
        />
      </view>
      <view
        v-if="showBtn"
        class="search-btn"
        @click="searchBtn"
      >
        搜索
      </view>
    </view>
    <!-- <popup-layer
      ref="popupRef"
      :direction="'left'"
      :show-pop="showCity"
    >
      <city-menu
        @cityClose="cityClose"
        @citySearch="citySearch"
      />
    </popup-layer> -->
  </view>
</template>

<script>
	// import cityMenu from '@/components/cityMenu/index.vue';
	// import popupLayer from 'components/popup-layer/popup-layer.vue';
	// import uniIcons from '@/components/uni-icons/uni-icons.vue';

	export default {
		name: 'SearchBar',
		// components: {
		// 	cityMenu,
		// 	popupLayer
		// },
		props: {
			placeholder: {
				type: String,
				default: '请输入关键词'
			},
			disabled: {
				type: Boolean,
				default: false,
			},
      showBtn: {
				type: Boolean,
				default: true,
			},
			currValue: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'goods' // 默认全局搜索
			}
		},
		data() {
			return {
				showCity: false,
				isFocus: false,
				form: {
					city: '',
					inputValue: '',
				},
			};
		},
		computed: {},
		// watch: {
		// 	currCity: function(val, oldVal) {
		// 		if(val) {					
		// 			// console.log('监听到city变化', val, oldVal)
		// 			this.form.city = val
		// 		}
		// 	}
		// },
		// created(e) {
		// 	if(this.$store.state.storeCity) {
		// 		this.form.city = this.$store.state.storeCity;
		// 	} else {
		// 		this.form.city = '城市';
		// 	}
		// },
		mounted() {
			this.$nextTick(() => {
				this.form.inputValue = this.currValue;
			});
		},
		methods: {
			cityClose() {
				this.showCity = false;
			},
			inputFocus() {
				this.isFocus = true;
			},
			// citySearch(item) {
			// 	this.form.city = item;
			// 	this.showCity = false;
			// 	// this.$store.commit('changeStoreCity', item)
			// 	this.$emit('search', this.form);
			// },
			selectCity() {
				this.showCity = true;
			},
			// 打开搜索页
			openSearch() {
        if (!this.showBtn) {
          this.$jumpUrl(`/subPages/search/index?type=${this.type}`);
        }
			},
      searchBtn() {
        uni.hideKeyboard();
				this.$emit('search', this.form);
      }
		},
	};
</script>

<style lang="less" scoped>
	.search {
		&-input {
			width: 690rpx;
			height: 70rpx;
			background: #ffffff;
			border-radius: 35rpx;
			border: 2rpx solid #FFDF02;
			display: flex;
      position: relative;
			// overflow: hidden;

			&-city {
				width: 200rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333;
				background: linear-gradient(138deg, #FFE955 0%, #FFD302 100%);
				border-radius: 35rpx 0px 0px 35rpx;
				position: relative;
				top: -2rpx;
				left: -2rpx;

				.spot {
					margin-right: 8rpx;
					width: 35rpx;
					height: 35rpx;
				}
			}

			&-txt {
				flex: 1;
				position: relative;
				overflow: hidden;
				border-left: 0;
				border-radius: 35rpx;

				input {
					padding: 0 30rpx;
          padding-left: 95rpx;
					height: 100%;
					width: 419rpx;
					color: #333;
				}

				// /deep/ .ph-sty {
				// 	padding-left: 90rpx;
				// 	color: #999;
				// }

				.other-search {
					width: 25rpx;
					height: 25rpx;
					position: absolute;
					top: 50%;
					left: 60rpx;
					margin-top: -12rpx;
				}
			}
		}

    &-btn {
      position: absolute;
      top: -2rpx;
      right: 0;
      width: 116rpx;
      height: 70rpx;
      background: linear-gradient(138deg, #FFE955 0%, #FFD302 100%);
      border-radius: 35rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 70rpx;
      text-align: center;
    }

		&-history {
			margin: 20rpx 0;

			text {
				display: inline-block;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 15rpx;
				font-size: 22rpx;
				color: #555;
				background: rgba(0, 0, 0, 0.04);
				border-radius: 100rpx;
				margin: 0 15rpx 15rpx 0;
			}
		}

		.seatch-content {
			display: flex;
			align-items: center;

			.searchInput {
				flex: 1;
				line-height: 70upx;
				height: 70upx;
				background: #FFF;
				border: 3upx #FE7D15 solid;
				padding: 0 79upx;
				border-radius: 50upx;
				position: relative;
				font-size: 26upx;

				&::before {
					content: '';
					position: absolute;
					left: 37upx;
					top: 50%;
					transform: translateY(-50%);
					width: 32upx;
					height: 32upx;
					background: url('~@/static/public/otherSearch.png')no-repeat;
					background-size: cover;
				}
			}

			.searchBtn {
				width: 90rpx;
				height: 52rpx;
				font-size: 12px;
				color: #f8f8f8;
				line-height: 24px;
				background: linear-gradient(138deg, #F78833 0%, #FDBC6E 100%);
				border-radius: 100px;
				margin-left: 20rpx;
			}
		}
		
		.search-content {
			padding: 20rpx;
		}
	}
</style>
